<template>
  <DetailBox :border="2" :marginHeight="111">
    <template #center>
      <el-row :gutter="6">
        <el-col :span="24">
          <ContentBox :border="3" :height="60" style="background: #4b4c6d">
            <template #center>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="区域ID：">
                  <el-input v-model="formInline.user" placeholder="请输入" clearable/>
                </el-form-item>
                <el-form-item label="区域属性：">
                  <el-select
                      v-model="formInline.region"
                      placeholder="请选择"
                      clearable
                  >
                    <el-option label="Zone one" value="shanghai"/>
                    <el-option label="Zone two" value="beijing"/>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button type="success" @click="onSubmit">重置</el-button>
                  <el-button type="primary" @click="areaList">区域列表</el-button>
                  <el-button type="primary" @click="oilWellList">油井列表</el-button>
                  <el-button type="primary" @click="baseMapSwitching">底图切换</el-button>
                  <el-button type="primary" @click="oilPipeControl">油管控制</el-button>
                </el-form-item>
              </el-form>
            </template>

          </ContentBox>
        </el-col>

        <el-col :span="offsetLeft">

          <div class="button-container" v-if="offsetLeft > 0">
            <el-button class="DArrowLeft" v-if="offsetLeft > 0" type="primary" :icon="DArrowLeft" circle
                       @click="leftCallBack"/>
          </div>

          <ZTable
              class="classTable"
              :tableData="tableData"
              :tableDataHeader="tableDataHeader"
              @deleteRow="deleteRow"
              @editRow="edit"
              @detailRow="detail"
          >
          </ZTable>
          <!--          <ContentBox :marginHeight="200" :border="3">-->
          <!--            <template #center>-->

          <!--         -->
          <!--            </template>-->

          <!--          </ContentBox>-->
        </el-col>


        <el-col :span="24-offsetLeft" class="content">
          <ContentBox :border="3" :marginHeight="200">
            <template #center>
              <MapView
                  :config="mapConfig"
                  @map-ready="onMapReady"
              />

              <!--    <MapView-->
              <!--        :height="'500px'"-->
              <!--        :width="'500px'"-->
              <!--        :config="mapConfig"-->
              <!--        @map-ready="onMapReady"-->
              <!--    />-->
            </template>

          </ContentBox>
        </el-col>

      </el-row>
      <el-button class="DArrowRight" v-if="!offsetLeft" type="primary" :icon="DArrowRight" circle
                 @click="RightCallBack"/>


      <Modal :visible :width="modalWidth" closeButton @update:visible="closeModal" :title
             :content-style="{borderRadius: '20px'}">

        <ZTable
            class="classTable"
            :tableData="tableData"
            :tableDataHeader="tableDataHeader"
        >
        </ZTable>
      </Modal>

      <DropdownU v-if="showDropdown" :position="dropdownPosition" :t="dropDownTitle" @closed="hideDropdown" >
        1111111
      </DropdownU>
    </template>
  </DetailBox>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, onUnmounted} from 'vue';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import MapView from '@/views/components/MapView/index.vue';
import ZTable from "@/views/components/table/ZTable/index.vue";

import {
  DArrowLeft,
  DArrowRight
} from '@element-plus/icons-vue'
import Modal from "@/views/components/Modal.vue";
import DropdownU from "@/views/components/DropdownU.vue";

// 自定义地图配置
const mapConfig = ref({
  basemaps: [
    // {name: '天地图', type: 'tdt', layer: 'img_d', show: true},
    // 可以添加更多图层
  ],
  scene: {
    center: {lat: 31, lng: 117, alt: 2000, heading: 0, pitch: 0},
    shadows: false, // 是否启用日照阴影
    removeDblClick: true, // 是否移除Cesium默认的双击事件

    // 以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
    sceneMode: 2, // 3等价于Cesium.SceneMode.SCENE3D,
    // 以下是Cesium.Scene对象相关参数
    showSun: false, // 是否显示太阳
    showMoon: false, // 是否显示月亮
    showSkyBox: false, // 是否显示天空盒
    showSkyAtmosphere: false, // 是否显示地球大气层外光圈
    fog: false, // 是否启用雾化效果
    fxaa: true, // 是否启用抗锯齿
    // 以下是Cesium.Globe对象相关参数
    globe: {
      depthTestAgainstTerrain: false, // 是否启用深度监测
      baseColor: "#3a384e", // 地球默认背景色
      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
      enableLighting: false // 是否显示昼夜区域
    },
    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
    cameraController: {
      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
      minimumZoomDistance: 50, // 地球放大的最小值（以米为单位）
      maximumZoomDistance: 5000, // 地球缩小的最大值（以米为单位）
      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
      enableZoom: true, // 是否允许 用户放大和缩小视图
      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
    }
  },
  terrain: false,
  control: {
    fullscreenButton: true, // 全屏按钮
    contextmenu: {hasDefault: true}, // 右键菜单
    // sceneModePicker: true,
    // infoBox: true,
    // vrButton: true,
    // geocoder: { service: "gaode" },
    // baseLayerPicker: true,
    // clockAnimate: true, // 时钟动画控制(左下角)
    // timeline: true, // 是否显示时间线控件
    distanceLegend: {style: {left: "10px", bottom: "25px"}},
    // compass: { style: { top: "10px", left: "5px" } }
  }
});

const {mars3d, Cesium} = window;

// 地图加载完成的回调
const onMapReady = (mapView: any) => {
  console.log('地图加载完成', mapView, mars3d);

  // const tileLayer = new mars3d.layer.XyzLayer({
  //   url: "https://data.mars3d.cn/tile/dizhiChina/{z}/{x}/{y}.png",
  //   minimumLevel: 0,
  //   maximumLevel: 10,
  //   rectangle: { xmin: 69.706929, xmax: 136.560941, ymin: 15.831038, ymax: 52.558005 },
  //   opacity: 0.7
  // })
  // mapView.addLayer(tileLayer)

  const tiles3dLayer = new mars3d.layer.TilesetLayer({
    name: "石化工厂",
    url: "https://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
    position: {lng: 117, lat: 31},
    // alt: 200, heading: 100, pitch: -100
    maximumScreenSpaceError: 1,
    shadows: Cesium.ShadowMode.DISABLED,
    // 以下参数可以参考用于3dtiles总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考。
    skipLevelOfDetail: true,
    loadSiblings: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10,
    preferLeaves: true,
    preloadWhenHidden: true,
    enableDebugWireframe: true, // 是否可以进行三角网的切换显示
    // 以上为优化的参数

    // popup: "all",
    // highlight: {
    //   type: 'click', // 默认为鼠标移入高亮，也可以指定click单击高亮
    //   // outlineEffect: true, // 采用OutlineEffect方式来高亮
    //   color: "#00FF00",
    //   width: 6
    // },
  })
  mapView.addLayer(tiles3dLayer)


  // 可以绑定Popup弹窗，回调方法中任意处理
  tiles3dLayer.bindPopup(function (event) {
    const attr = event.graphic.attr
    // attr["视频"] = `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`;
    return mars3d.Util.getTemplateHtml({title: "石化工厂", template: "all", attr})
  })

  // 单击事件
  tiles3dLayer.on(mars3d.EventType.click, function (event) {
    console.log("单击了3dtiles图层", event)
  })


  // 加个标识
  const graphic = new mars3d.graphic.PointEntity({
    position: [117, 31.001, 1441],
    style: {
      color: "#ff0000",
      pixelSize: 10,
      outlineColor: "#ffffff",
      outlineWidth: 2
    },
    tooltip: "我是视角中心点"
    // flyTo: true
  })
  mapView.graphicLayer.addGraphic(graphic)
};

const offsetLeft = ref(5)

const leftCallBack = () => {
  offsetLeft.value = 0
}
const RightCallBack = () => {
  offsetLeft.value = 5
}

// 顶部搜索区域
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const visible = ref(false)
const modalWidth = ref(1000)
const closeModal = (val: boolean) => {
  visible.value = val
}
const title = ref('')

const areaList = () => {
  // 区域列表
  title.value = '区域列表'
  visible.value = true
  modalWidth.value = 1000
}
const oilWellList = () => {
// 油井列表
  title.value = '油井列表'
  visible.value = true
  modalWidth.value = 500
}

const dropdownPosition = ref({x: 0, y: 0});
const dropDownTitle = ref('<UNK>');
const showDropdown = ref(false);

const baseMapSwitching = (event) => {
// 底图切换
  dropdownPosition.value = {
    x: event.clientX - 178/2, // 鼠标点击的水平位置
    y: event.clientY - 101 + 30 // 鼠标点击的垂直位置 - 顶部101的高 + 不能点哪里到哪里，要差开一点距离（≈30）
  };

  dropDownTitle.value = '底图切换';
  showDropdown.value = true; // 显示子组件

}
const oilPipeControl = (event) => {
// 油管控制
  dropdownPosition.value = {
    x: event.clientX - 178/2, // 鼠标点击的水平位置
    y: event.clientY - 101 + 30 // 鼠标点击的垂直位置 - 顶部101的高 + 不能点哪里到哪里，要差开一点距离（≈30）
  };

  dropDownTitle.value = '油管控制';
  showDropdown.value = true; // 显示子组件

}

const hideDropdown = () =>{
  showDropdown.value = false;
}

const tableData = ref([
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
  },
])

const tableDataHeader = [
  {
    label: '车辆',
    prop: 'name',
    width: 100,
  },
  {
    label: '操作',
    operate: true,
    prop: 'Operation',
    children: [
      {
        label: '编辑',
        prop: 'edit',
        method: 'editRow',
        type: 'primary'
      },
      {
        label: '查看详情',
        prop: 'Detail',
        method: 'detailRow',
        type: 'info'
      }
    ]
  }
]

const deleteRow = () => {

}
const edit = () => {

}
const detail = () => {

}
</script>

<style lang="scss" scoped>
.classTable {
  height: calc(100% - 30px);
  overflow-y: auto;
  padding: 0 10px;
  color: #fff;
}

.button-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
}

.DArrowLeft {
  position: absolute;
  top: 3px;
  right: 6px;
  z-index: 10;
}

.DArrowRight {
  position: fixed;
  top: 64px;
  left: -12px;
  z-index: 10;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>